@import "@/common/constants/StyleConst.scss";

.search-container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 40%;
  min-width: 305px;

  .input-group {
    width: 80%;
    height: 32px;
    background-color: $color-bg-white;
    border-radius: 16px;
    position: relative;
    display: flex;

    .input-search {
      width: 60%;
      height: 32px;
      position: absolute;
      left: 12px;

      .v-input__control {
        min-height: 30px;

        .v-input__slot {
          padding: 0;
          background-color: $color-bg-white;
        }
      }
    }

    .dividing-line {
      width: 2px;
      height: 26px;
      background-color: $color-theme-lightblue;
      margin-left: 67%;
      align-self: center;
    }

    .input-select {
      width: 28%;
      position: absolute;
      z-index: 2;
      right: 12px;

      .v-input__control {
        min-height: 30px;

        .v-input__slot {
          padding: 0;
          background-color: $color-bg-white;
        }
      }
    }
  }

  .icon-group {
    .icon {
      margin-left: 6px;
      cursor: pointer;
    }

    .icon:active {
      opacity: 0.5;
    }
  }
}